<template>
  <div class="home-wrap">
    <template v-if="!loginFlag">
      <div class="header-wrap">
        <img src="./img/logo.png" alt="" class="logo" />
        <NstdBaseMenu
          :data="nstdBaseMenu1Data"
          font-size="20px"
          color="#fff"
          active-color="#fff"
          theme-color="rgba(0, 146, 128, 1)"
          hover-bg-color="#e5f4f2"
          mode="horizontal"
          label="title"
          class="nstd-base-menu_1"
          @menu-click="handleMenuClick"
        />
        <NstdSearch v-model="search1" background="#fff" class="nstd-search_1" />
        <i class="yf-icon"></i>
        <i class="ld-icon"></i>
        <img src="./img/line.svg" alt="" class="line" />
        <i class="rt-icon"></i>
        <span class="username">admin</span>
        <img src="./img/line.svg" alt="" class="line" />
        <i class="kg-icon" @click="onLogoutClick"></i>
      </div>
      <div class="breadcrumb-wrap" v-if="pathList.length > 1">
        <p class="back" @click="handleBack"><<span>返回</span></p>
        <NstdBizBreadcrumb separator=">" font-size="16px" :options="pathList" class="nstd-biz-breadcrumb_1" />
      </div>
      <router-view />
    </template>
    <router-view v-else />
  </div>
</template>

<script>
  import { useAuthStore } from '@/stores/index.js';
  import { getSignV2Logout } from '@/api/auth/signV2.js';
  import { flatMenuData } from '@/utils/menu.js';
  export default {
    name: 'pcIndex',
    data() {
      return {
        pathList: [],
        search1: '',
        nstdBaseMenu1Data: [],
        parentMenu: []
      };
    },
    computed: {
      loginFlag() {
        return this.$route.fullPath === '/home';
      }
      // menuList() {
      //   return useAuthStore().menuList
      // }
    },
    watch: {
      menuList: {
        // handler(val) {
        //   this.getMenuList();
        // },
        deep: true
      }
    },
    mounted() {
      // this.getMenuList();
      // if (sessionStorage.getItem('pathList')) this.pathList = JSON.parse(sessionStorage.getItem('pathList'));
    },
    methods: {
      handleBack() {
        this.pathList = [];
        sessionStorage.setItem('pathList', JSON.stringify([]));
        this.$router.push('/pcHome');
      },
      async onLogoutClick() {
        this.pathList = [];
        await getSignV2Logout();
        sessionStorage.clear();
        useAuthStore().clearUserInfo();
        this.$router.push({
          path: '/login',
          replace: true
        });
      },
      handleMenuClick(item) {
        this.parentMenu = [];
        if (item.children && item.children.length) return false;
        this.$router.push(item.path);
        this.getAllParentMenu(item);
        this.pathList = [...this.parentMenu, item].map((i) => {
          return {
            ...i,
            label: i.title
          };
        });
        sessionStorage.setItem('pathList', JSON.stringify(this.pathList));
      },
      getAllParentMenu(item) {
        const menuList = flatMenuData(this.nstdBaseMenu1Data).filter((i) => i.id === item.pid);
        this.parentMenu = [...this.parentMenu, ...menuList];
        if (menuList.length) this.getAllParentMenu(menuList[0], this.parentMenu);
      },
      getMenuList() {
        const transformRouters = (routers) => {
          return routers
            .filter((i) => i.meta.nav !== false && i.meta.display)
            .map((routerItem) => {
              const { meta, path, children } = routerItem;
              if (children && children.length) {
                return {
                  ...meta,
                  path,
                  children: transformRouters(children)
                };
              } else {
                return {
                  ...meta,
                  path
                };
              }
            });
        };
        const { menuList: routes } = useAuthStore();
        this.nstdBaseMenu1Data = reactive(transformRouters(routes));
        this.nstdBaseMenu1Data = this.nstdBaseMenu1Data.splice(3, this.nstdBaseMenu1Data.length);
        console.log(this.nstdBaseMenu1Data, 'menuList');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .nstd-biz-breadcrumb_1 {
    :deep(.el-breadcrumb__inner) {
      cursor: pointer !important;
    }
    :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
      color: #009280;
    }
    :deep(.el-breadcrumb__item .el-breadcrumb__inner),
    :deep(.el-breadcrumb__item) {
      color: #aaaaaa;
    }
    :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
      color: #171717;
    }
  }
  .home-wrap {
    background-color: #f2f2f2;
    height: 100%;
  }
  .breadcrumb-wrap {
    height: 40px;
    background-color: #fff;
    padding: 0 16px;
    display: flex;
    align-items: center;
    .back {
      font-size: 16px;
      color: #ed7b2f;
      cursor: pointer;
      margin-right: 16px;
      span {
        display: inline-block;
        width: 42px;
        text-align: right;
      }
    }
  }
  .header-wrap {
    height: 88px;
    background-color: rgba(0, 146, 128, 1);
    padding: 0 16px;
    display: flex;
    align-items: center;
    .kg-icon {
      cursor: pointer;
      width: 20px;
      height: 22px;
      background: url('./img/kg.png') no-repeat center center/100% 100%;
    }
    .username {
      font-weight: 650;
      font-size: 14px;
      color: #ffffff;
      margin-right: 32px;
    }
    .rt-icon {
      width: 22px;
      height: 22px;
      background: url('./img/ren.png') no-repeat center center/100% 100%;
      margin-right: 8px;
    }
    .line {
      width: 5px;
      height: 25px;
      margin-right: 15px;
    }
    .yf-icon {
      width: 25px;
      height: 22px;
      background: url('./img/yifu.png') no-repeat center center/100% 100%;
      margin-right: 20px;
    }
    .ld-icon {
      width: 20px;
      height: 22px;
      background: url('./img/ld.png') no-repeat center center/100% 100%;
      margin-right: 20px;
    }
    .logo {
      margin-right: 22px;
    }
    .nstd-base-menu_1 {
      width: calc(100% - 693px);
      margin-right: 8px;
    }
    .nstd-search_1 {
      width: 250px;
      height: 40px;
      margin-right: 16px;
    }
  }
</style>
